<% include header_index_iview.html %>
<style>
    body{
        background: rgb(239,239,244);
    }
    .zsx_img{
        height: 4px;
        line-height: 4px;
    }
    .big_div{
        line-height: 0;
    }
    .address{
        width: 100%;
        height: 90px;
        background: white;
    }
    .add-detail .receiver{
        width: calc(100% - 80px);
        height: 18px;

        font-size: 15px;
        color: #454545;
        line-height: 18px;

        margin-top: 13px;
    }
    .add-detail .receive_address{
        width: calc(100% - 80px);
        height: 36px;

        font-size: 13px;
        color: #adadad;
        line-height: 18px;

        margin-top: 4px;
    }
    .add-detail .receive_phone{
        width: calc(100% - 80px);
        height: 18px;

        font-size: 13px;
        color: #adadad;
        line-height: 18px;
    }
    .left_img_add_ico{
        width: 20px;
        height: 20px;
        margin: 35px 10px;
    }
    .right_img_more_ico{
        width: 20px;
        height: 20px;
        margin: 35px 10px;
        transform: rotate(180deg)
    }
    .add-detail{
        width: calc(100% - 80px);
        height: 90px;
    }
    .goods_list{
        width: 100%;
        margin-top: 10px;
        float: left;
    }
    .goods_info{
        width: 100%;
        background: white;
    }
    .goods_list .shop_name{
        width: 100%;
        text-indent: 10px;
        line-height: 44px;
        font-size: 15px;
        height: 44px;
        color: #454545;
        border-bottom: 1px solid #EEE;
    }
    .single-div .more{
        width: 15px;
        height: 15px;
        transform: rotate(180deg);
        margin-top: 14.5px;        
    }
    .single-div{
        border-top: 1px solid #EEE;
    }
    .bottom-div{
        height: 49px;
        width: 100%;
        background: white;
        float: left;
        position: fixed;
        bottom: 0;
        left:0;
    }
    .bottom-div .button{
        width: 160px;
        height: 49px;
        background: linear-gradient(to right,#fe9b0c,#ff8000);

        color: white;
        text-align: center;
        line-height: 49px;
        font-size: 15px;

        float: right;
    }
    .bottom-div .order-info{
        width: calc(100% - 160px);
        height: 49px;
    }
    .bottom-div .order-info .price{
        width: 100%;
        height: 28px;
        text-indent: 10px;

        line-height: 28px;
        
        float: left;
    }
    .bottom-div .order-info .goods-num{
        width: 100%;
        height: 21px;
        text-indent: 10px;

        line-height: 21px;
        
        float: left;
    }
    .payment{
        margin-top: 10px;
    }
    .shop_name{
        border-bottom: 1px solid #EEE;
    }
    .remake_input{
        height: 30px;
        margin-top: 7px;
        border:none;
        width: 200px;
        text-align: right;
    }
</style>
<div class="big_div">
    <top title="确认订单"></top>
    <img src="images/default_wap/zsx.png" class="zsx_img" alt=""><!-- 裝飾線img -->
    <div class="address" v-for="add in address" v-if="add.is_buy==1">
        <img class="left_img_add_ico fl" src="images/default_wap/GPS.png" alt="">
        <div class="add-detail fl">
            <p class="receiver sl1">收货人：{{add.consignee}}</p>
            <p class="receive_address sl2">{{add.address}}</p>
            <p class="receive_phone sl1">联系电话：{{add.mobile}}</p>
        </div>
        <img class="right_img_more_ico fl" src="images/default_wap/return.png" alt="">
    </div>
    <!-- 地址栏 -->

    <div class="goods_list" v-for="(shop,index) in cart_list.shop_info" v-if="shop != null">
        <div class="goods_info" v-if="shop != null">
            <single class="shop_name">
               {{cart_list.shop_info[index].shop_name}}
            </single>
            <order :goods="goods" v-for="goods in cart_list.cart_list[index]">
                <div slot="reg_refund"></div>
                <div slot="refund_detail"></div>
            </order>
            <!-- 商品图片名字等 -->
            <single>
                优惠卷
                <div slot="right">
                    <img class="fr more" src="images/default_wap/return.png" alt="">
                    <p class="fr">满800-80</p>
                </div>
            </single>
            <!-- 单行 -->
            <single>
                快递方式
                <div slot="right">
                    <img class="fr more" src="images/default_wap/return.png" alt="">
                    <p class="fr">邮政</p>
                </div>
            </single>
            <!-- 单行 -->
            <single>
                运费
                <div slot="right">
                    <p class="fr">8.00</p>
                </div>
            </single>
            <!-- 单行 -->
            <single>
                买家留言
                <div slot="right">
                    <input type="text" class="fr remake_input" placeholder="选填">
                </div>
            </single>
            <!-- 单行 -->
            <single>
                共{{cart_list.cart_info[index].total_num}}件商品
                <div slot="right">
                    <p class="fr">合计：₱ {{cart_list.cart_info[index].total_price}}</p>
                </div>
            </single>
            <!-- 单行 -->
            
            <!-- 单行 -->
        </div>
        
    </div>

    <single class="payment">
        支付方式
        <div slot="right">
            <img class="fr more" src="images/default_wap/return.png" alt="">                        
            <p class="fr">菲信支付</p>
        </div>
    </single>
    <div style="height:60px;width:100%;float:left"></div>
    <div class="bottom-div">
        <div class="button" @click="pay()">确认订单</div>
        <div class="order-info">
            <p class="price sl1">共计：P{{total_price}}</p>
            <p class="goods-num sl1">共 {{total_num}} 件商品</p>
        </div>
    </div>

</div>

<script src="images/default_wap/vue.js"></script>
<script src="dist/cart_buy.bundle.js"></script>
<script>
    Vue.use(bundle);
    var page=new Vue({
        el:'.big_div',
        data:{
            cart_list:{},
            address:[],
            //提交订单用的变量
            province:'',//确认订单用的省
            city:'',//确认订单用的城市
            county:'',//确认订单用的国家
            address:'',//确认订单用的详细地址
            consignee:'',//确认订单用的收件人
            mobile:'',//确认订单用的手机号码
            zipcode:'',//确认订单用的邮编
            advance:'',//提交订单用的商品说明
            pay_pass:'',//支付密码
            pay_id:'',//
            cart_uid:'',//购物车的商品uid
            memo:'',//
            invoice:'',//
            ship_uid:'',//
            ship_price:'',//
            coupon_uid:'',//优惠卷uid
        },
        computed:{
            total_price:function(){
                var total=0;
                if(typeof(this.cart_list.cart_info)!='undefined'){
                    this.cart_list.cart_info.forEach(element => {
   
                        if(element!=null){total+=element.total_price;console.log(total)}
                    });
               
                    return total;
                    
                }
               
            },
            total_num:function(){
                var total=0;
                if(typeof(this.cart_list.cart_info)!='undefined'){
                    this.cart_list.cart_info.forEach(element => {
                        if(element!=null){
                            total+=element.total_num;
                        }
                    });
                }
                return total;
            }
        },
        mounted:function(){
            var that=this;
            $.post('./cart_buy',{setp:'<%- setp %>',cart_uids:'<%- str_uids %>'},function(data){
                console.log(data);
               for (let index in data.cart_list){
                   
                   if(data.cart_list[index]!=null && data.cart_list[index]!='' && typeof(data.cart_list[index])!= 'undefined'){
                       
                       if(typeof(data.cart_list[index][0])=='undefined')
                       {    
                            var s=data.cart_list[index];
                            data.cart_list[index]=[];
                            data.cart_list[index].push(s);
                       }
                        for(let indexs in data.cart_list[index] ){
                            data.cart_list[index][indexs].img=data.cart_list[index][indexs].goods_file1;
                            data.cart_list[index][indexs].goods_attr=data.cart_list[index][indexs].attr;
                        }
                   }
                
            }
                that.cart_list=data;
            });
            
            $.post('./address',{},function(data){
                that.address=data.data;
            });
        },
        methods:{
            pay:function(){
                /* $.post('http://localhost/english/cart.php?action=pay',{province:'aaa',city:'bbbb',county:'cccc',address:'address info',consignee:'su',mobile:'17750935360',zipcode:'363100',advance:'1',pay_pass:'phmall',pay_id:'16','cart_uid[31]':'766','memo[31]':'','invoice[31]':'','ship_uid[31]':'0','ship_price[31]':'0','coupon_uid[31]':'0','m_check_uid':1,m_check_id:'admin',api:'1'},function(data){
                    console.log('pay');
                    console.log(data);
                }) */
                $.post('./cart_pay',{province:'aaa',city:'bbbb',county:'cccc',address:'address info',consignee:'su',mobile:'17750935360',zipcode:'363100',advance:'1',pay_pass:'phmall',pay_id:'16','cart_uid[31]':'768','memo[31]':'','invoice[31]':'','ship_uid[31]':'0','ship_price[31]':'0','coupon_uid[31]':'0'},function(data){
                    console.log('pay');
                    console.log(data);
                })
            }
        }
    })
</script>


<% include footer.html %>